<template>
  <div>
    <div id="container"></div>

    <div id="panel">
      <div>当前位置：{{ palce }}</div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";

import city from "./city";
export default {
  data() {
    return {
      markerPointList: [],
      palce: "",
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },

  methods: {
    initMap() {

      let list = [
        { city: "北京市" },
        { city: "沈阳市" },
        { city: "长春市" },
        { city: "上海市" },
        { city: "广州市" },
      ];
      let newlist = list.map((item) => {
        item.location = city[item.city];
        return item;
      });
      this.mapinfo(newlist);
    },
    mapinfo(newlist) {
      //这里填你自己的高德接口key
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "location",
          "AMap.CitySearch",
          "AMap.PlaceSearch",
          "AMap.Geolocation",
          "AMap.Autocomplete",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 5,
          zoomEnable: false,
        });
        let that = this;
        let geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否获取高精度定位，可能影响效率，默认false
          timeout: 10000, // 定位超时工夫，ms
          needAddress: true, // 是否须要将定位后果进行逆天文编码操作
          extensions: "all", // 是否须要具体的你天文编码信息，默认'base'
        });
        // 获取城市信息
        geolocation.getCityInfo(function (status, result) {
          that.palce = result.city;
        });
        let coordinatelng = that.map.getCenter().lng;
        let coordinatelat = that.map.getCenter().lat;

        this.deviceList = [
          {
            longitude: 120,
            latitude: 30,
            statusType: "alarmDevice",
            coordinatelng: coordinatelng,
            coordinatelat: coordinatelat,
          },
        ];
      console.log(city["长春市"],[coordinatelng,coordinatelat]);
        if (this.markerPointList.length !== 0) {
          this.map.remove(this.markerPointList);
          this.markerPointList = [];
        }
        var markers = newlist
          .filter((item) => item.city !== that.palce)
          .map((res) => {
            res.position = res.location;
            res.icon =
              "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
            return { icon: res.icon, position: res.position };
          });
        // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
        markers.forEach(function (marker) {
          new AMap.Marker({
            map: that.map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-23, -30),
          });
        });

        this.deviceList.forEach((value) => {
          if (value.longitude !== null && value.latitude !== null) {
            var markerPoint = new AMap.Marker({
              position: [value.coordinatelng, value.coordinatelat],
              offset: new AMap.Pixel(0, 15), //点偏移量
            });
            var markerDiv = document.createElement("div");
            markerDiv.className = value.statusType;
            var sameLonLatPoint = this.deviceList.filter((val) => {
              return (
                val.longitude === value.longitude &&
                val.latitude === value.latitude
              );
            });
            var markerSpan = document.createElement("span");
            markerSpan.innerText = "";
            markerDiv.appendChild(markerSpan);
            markerPoint.setContent(markerDiv);
            this.markerPointList.push(markerPoint);
            this.map.add(markerPoint);
          }
        });
      });
    },
  },
};
</script>
<style >
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: calc(100vh - 50px);
}
#tip {
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  font-size: 12px;
  right: 10px;
  top: 20px;
  border-radius: 3px;
  border: 1px solid #ccc;
  line-height: 30px;
}

#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 150px;
}
.alarmDevice {
  text-align: center;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  background-color: #3769f18e;
  box-shadow: 0px 0px 15px #3769f18e;
  border-radius: 50%;
  -webkit-animation-name: "alarmDeviceBreath"; /*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1s; /*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s; /*动画延迟时间*/
  -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: alternate; /*定义动画方式*/
}


@keyframes alarmDeviceBreath {
  0% {
    margin-left: 0;
    margin-top: 0;
    width: 30px;
    height: 30px;
    box-shadow: 0px 0px 15px #3769f18e;
    opacity: 1.2;
  }

  100% {
    margin-left: 5px;
    margin-top: 5px;
    width: 20px;
    height: 20px;
    box-shadow: 0px 0px 10px #3769f18e;
    opacity: 0.6;
  }
}
.normalDevice span,
.offLineDevice span,
.alarmDevice span {
  line-height: 30px;
  font-size: 13px;
  -webkit-animation-name: "breathSpan";
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
.alarmDeviceother span {
  line-height: 30px;
  font-size: 13px;
  -webkit-animation-name: "breathSpan";
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@keyframes breathSpan {
  0% {
    line-height: 30px;
  }
  100% {
    line-height: 20px;
  }
}
.amap-icon img {
  width: 25px;
  height: 34px;
}
.amap-icon {
    position: initial!important;

}
</style>
